<template>
  <div>
    <div>
      <van-nav-bar
        left-text="手机号设置"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </div>
    <div class="main">
      <div class="tel_info">
        <p class="info_title">当前绑定手机号</p>
        <p class="tel">{{ tel | mobile }}</p>
      </div>
      <div class="bottom_btn">
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)">
          {{ btnText }}
        </van-button>
        <van-button type="default">返回</van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  filters: {
    mobile(value) {
      let start = value.slice(0, 3);
      let end = value.slice(-4);
      return `${start}****${end}`;
    },
  },
  data() {
    return {
      btnText: "修改",
      tel: "13467856765",
    };
  },
};
</script>
<style lang="less" scoped>
.tel_info {
  margin: 30px auto;
  width: 150px;
  text-align: center;
  .info_title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.2px;
  }
  .tel {
    line-height: 35px;
    font-size: 19px;
    font-weight: 600;
  }
}
.bottom_btn {
  width: 250px;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  button {
    margin: 10px 0;
  }
}
</style>